<template>

    <header>
      <div class="container">
        <h1>班级学情画像分析及教学方案优化</h1>
        <p class="subtitle">基于多维度数据分析，提供精准教学建议</p>
      </div>
    </header>
    <main>
      <div class="container">
      <!-- 班级整体情况概览 -->
      <h2>班级整体情况概览</h2>
      <div class="dashboard">
        <div class="card">
          <h3 class="card-title">班级基本信息</h3>
          <div class="data-row">
            <span class="label">班级名称：</span>
            <span class="value">高一(3)班</span>
          </div>
          <div class="data-row">
            <span class="label">学生人数：</span>
            <span class="value">45人</span>
          </div>
          <div class="data-row">
            <span class="label">学期：</span>
            <span class="value">2023-2024学年第一学期</span>
          </div>
          <div class="data-row">
            <span class="label">班主任：</span>
            <span class="value">张老师</span>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title">整体成绩情况</h3>
          <div class="data-row">
            <span class="label">平均分：</span>
            <span class="value">82.5分</span>
          </div>
          <div class="data-row">
            <span class="label">优秀率：</span>
            <span class="value">46.7%</span>
          </div>
          <div class="data-row">
            <span class="label">及格率：</span>
            <span class="value">95.6%</span>
          </div>
          <div class="data-row">
            <span class="label">最高分：</span>
            <span class="value">98分</span>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title">学习行为分析</h3>
          <div class="data-row">
            <span class="label">平均作业完成率：</span>
            <span class="value">92.3%</span>
          </div>
          <div class="data-row">
            <span class="label">作业平均完成时间：</span>
            <span class="value">45分钟</span>
          </div>
          <div class="data-row">
            <span class="label">平均课堂参与度：</span>
            <span class="value">87.5%</span>
          </div>
          <div class="data-row">
            <span class="label">课外学习时长：</span>
            <span class="value">2.5小时/天</span>
          </div>
        </div>
      </div>

      <!-- 学生综合表现分析 -->
      <h2>学生综合表现分析</h2>
      <div class="chart-container">
        <div class="chart-header">
          <h3 class="chart-title">学生综合表现分布</h3>
        </div>
        <div class="chart">
          <p>这里将显示学生综合表现分布的饼图</p>
        </div>
      </div>

      <!-- 各学科情况分析 -->
      <h2>各学科情况分析</h2>
      <div class="dashboard">
        <div class="card" v-for="(subject, index) in subjects" :key="index">
          <h3 class="card-title">{{ subject.name }}</h3>
          <div class="data-row">
            <span class="label">平均分：</span>
            <span class="value">{{ subject.averageScore }}分</span>
          </div>
          <div class="data-row">
            <span class="label">优秀率：</span>
            <span class="value">{{ subject.excellentRate }}%</span>
          </div>
          <div class="data-row">
            <span class="label">薄弱知识点：</span>
            <span class="value">{{ subject.weakPoints }}</span>
          </div>
        </div>
      </div>

      <!-- 教学方案优化建议 -->
      <h2>教学方案优化建议</h2>
      <div class="recommendation-card">
        <h3 class="recommendation-title">个性化教学建议</h3>
        <ul class="recommendation-list">
          <li class="recommendation-item" v-for="(suggestion, index) in suggestions" :key="index">
            <div class="recommendation-subject">{{ suggestion.subject }}</div>
            <div class="recommendation-content" v-html="suggestion.content"></div>
            <a href="#" class="recommendation-action">查看详情</a>
          </li>
        </ul>
      </div>

      <!-- 教学资源推荐 -->
      <h2>教学资源推荐</h2>
      <div class="chart-container">
        <div class="chart-header">
          <h3 class="chart-title">适合本班的优质教学资源</h3>
        </div>
        <div class="dashboard">
          <div class="card" v-for="(resource, index) in resources" :key="index">
            <h3 class="card-title">{{ resource.subject }}教学资源</h3>
            <div class="data-row">
              <span class="label">推荐教材：</span>
              <span class="value">{{ resource.textbook }}</span>
            </div>
            <div class="data-row">
              <span class="label">在线课程：</span>
              <span class="value">{{ resource.onlineCourse }}</span>
            </div>
            <div class="data-row">
              <span class="label">教学工具：</span>
              <span class="value">{{ resource.tool }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    </main>
</template>

<script lang="ts">
export default {
  data() {
    return {
      subjects: [
        {
          name: '语文',
          averageScore: 85.2,
          excellentRate: 42.2,
          weakPoints: '现代文阅读、作文',
        },
        {
          name: '数学',
          averageScore: 80.5,
          excellentRate: 40.0,
          weakPoints: '函数、几何证明',
        },
        {
          name: '英语',
          averageScore: 88.3,
          excellentRate: 51.1,
          weakPoints: '听力、写作',
        },
      ],
      suggestions: [
        {
          subject: '语文',
          content: `
            针对现代文阅读和作文能力较弱的学生，建议增加每周一次的专项训练课。训练课内容包括：
            <ul>
              <li>现代文阅读技巧讲解与练习</li>
              <li>作文结构分析与写作指导</li>
              <li>优秀范文赏析与仿写练习</li>
            </ul>
          `,
        },
        {
          subject: '数学',
          content: `
            针对函数和几何证明薄弱的学生，建议：
            <ul>
              <li>制作函数图像认知卡片，帮助学生直观理解不同函数特性</li>
              <li>利用几何画板软件，开展互动式几何证明教学</li>
              <li>组织数学学习小组，开展合作学习与互助答疑</li>
            </ul>
          `,
        },
        {
          subject: '英语',
          content: `
            针对听力和写作薄弱的学生，建议：
            <ul>
              <li>每周安排两次听力专项训练，每次30分钟</li>
              <li>开展英语写作工作坊，老师现场批改并指导修改</li>
              <li>建立英语学习角，鼓励学生课余时间进行英语口语交流</li>
            </ul>
          `,
        },
      ],
      resources: [
        {
          subject: '语文',
          textbook: '《高中语文阅读技巧全解析》',
          onlineCourse: '《高考语文作文特训营》',
          tool: '语文智能批改系统',
        },
        {
          subject: '数学',
          textbook: '《高中数学函数与几何精讲》',
          onlineCourse: '《几何证明方法全解析》',
          tool: '几何画板高级版',
        },
        {
          subject: '英语',
          textbook: '《高中英语听力突破》',
          onlineCourse: '《英语写作高分技巧》',
          tool: '英语口语智能评测系统',
        },
      ],
    };
  },
};
</script>

<style scoped>
.student-index{
  width: 100%;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  /* 移除固定高度 */
  height: 200px;
}
header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  margin-bottom: 30px;
}
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: #2c3e50;
}
h1 {
  font-size: 28px;
  text-align: center;
  padding-bottom: 10px;
}
.subtitle {
  text-align: center;
  color: #7f8c8d;
  margin-bottom: 20px;
}
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}
.card-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #2980b9;
  border-bottom: 1px solid #ecf0f1;
  padding-bottom: 10px;
}
.data-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ecf0f1;
}
.data-row:last-child {
  border-bottom: none;
}
.label {
  color: #7f8c8d;
}
.value {
  font-weight: bold;
  color: #2c3e50;
}
.chart-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 30px;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.chart-title {
  font-size: 18px;
  color: #2980b9;
}
.chart {
  height: 300px;
  background-color: #f9f9f9;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f8c8d;
}
.recommendation-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 30px;
}
.recommendation-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #2980b9;
  border-bottom: 1px solid #ecf0f1;
  padding-bottom: 10px;
}
.recommendation-list {
  list-style-type: none;
  padding: 0;
}
.recommendation-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ecf0f1;
}
.recommendation-item:last-child {
  border-bottom: none;
}
.recommendation-subject {
  font-weight: bold;
  margin-bottom: 5px;
}
.recommendation-content {
  color: #7f8c8d;
}
.recommendation-action {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #3498db;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}
.recommendation-action:hover {
  background-color: #2980b9;
}

/* 保持footer在main下面 和header在main之上,格式为footer为页面底角版权部分,不遮挡main部分*/
main {
  margin-top: 70px;
  height: 2100px;
}
.footer {
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px 0;
  text-align: center;
  border-top: 1px solid #ddd;
}

</style>

